<template>
  <div class="user-page">
    <n-data-table
      :columns="powerColumns"
      :data="powerData"
      :single-line="false"
      :pagination="false"
      :bordered="false"
      titleAlign="center"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useAppStore } from "@/store/modules/user";
import { GetPermissionsList } from "@/server";
const store = useAppStore();
const powerColumns = [
  {
    title: "权限名称",
    key: "powerName",
    align: "center",
    width: "30%",
  },
  {
    title: "权限内容",
    key: "powerContent",
    align: "center",
    width: "70%",
  },
];
const powerData = ref([]) as any;
/**
 * @description: 获取用户列表
 * @return {*}
 * @author: cool panda
 */
const GetPermissionsListFun = async () => {
  const res: any = await GetPermissionsList({});
  if (res.result.isSuccess) {
    const result = res.result.result;
    if (result) {
      powerData.value = result.map((e: any) => {
        const item = {
          powerName: e.permissions,
          powerContent: e.datas.map((m: any) => m.functionName) + "",
        };
        return item;
      });
    }
  } else {
    store.error(res.result.message); // 错误提示
  }
};
onMounted(() => {
  GetPermissionsListFun();
});
</script>
<style lang="less" scoped>
:deep(.n-input) {
  --n-color: rgba(57, 66, 72, 1) !important;
  --n-color-focus: rgba(57, 66, 72, 1) !important;
  --n-text-color: rgb(255, 255, 255) !important;
  --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
  --n-border-hover: 1px solid #02a8ae !important;
  --n-border-focus: 1px solid #02a8ae !important;
  --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

:deep(.n-input__input) {
  text-align: left !important;
}

.user-page {
  background: #394248;
  height: calc(100vh - 2.4rem);
  overflow: hidden;
  :deep(.n-data-table) {
    .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td {
      background: #61676c;
    }
    .n-data-table-tr:not(.n-data-table-tr--summary):hover {
      background: #394248;
    }
    .n-data-table-thead {
      background: #394248;
    }
    .n-data-table-th {
      background: none;
      color: #ffffff;
      border-right: 1px solid #394248;
      border-bottom: 1px solid #394248;
    }
    .n-data-table-td {
      background: #61676c;
      color: #ffffff;
      border-right: 1px solid #394248;
      border-bottom: 1px solid #394248;
    }
  }
  :deep(
      .n-pagination-item.n-pagination-item--disabled.n-pagination-item--button
    ) {
    background-color: rgb(175 175 178);
  }
}
</style>
